<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title></title>
	<style type="text/css">
		div{
			display: inline-block;
			font-size: 14px;
			color: red;
			opacity: 0;
		}
		.checked{
			width: 100px;
			height: 100px;
			position: absolute;
			left: 100px;
			top: 100px;
			color: #fff;
			border:0;
			list-style: none;
			background-color: yellow;
		}
		input[type=checkbox] {
visibility: hidden;
}
	</style>
</head>
<body>


<input type="checkbox" style="background:#333; border:yellow 2px solid;" value="aaa"/>
<input name="a" type="checkbox" style="position:absolute;clip: rect(6 15 15 6)" checked="checked">

<input name="a" type="checkbox" style="position:absolute;clip: rect(106 115 115 106)" checked="checked" class="checked"> 
<form name="myForm" action="##" onsubmit="return validateForm()" method="post">
	Name:<input type="text" name="fname"/ value="">
	<input type="submit" value="Submit" />
	<div>请输入正确的名字！</div>	
</form>
<script type="text/javascript">
	function validateForm(){
		var x=document.forms["myForm"]["fname"].value;
		if (x==null||x=="") {
			var i=0;
			var oDiv=document.getElementsByTagName("div")[0];
			var time=window.setInterval(function(){
				i+=.2;
				oDiv.style.opacity=0+i;
				if (i>=1) {
					window.clearInterval(time);
				};
			},300)
			
			return false;
		}
	}
window.onmousemove=function(){
	var input=document.getElementsByTagName("input")[0];
	if(input.value!==""){
		var oDiv=document.getElementsByTagName("div")[0];
		oDiv.style.opacity=0;
	}
}
		
</script>
</body>
</html>